<template>
	<div style="display: flex;flex-direction: column;" class="otherPage contactUs">
		<Header :selected="9"></Header>

		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="1" :bgColor="bgColor">
		</Navigation>


		<div class="content" style="min-height: 600px;">
			<div class="content_bg"
				style="min-height: 600px;display: flex;  align-items: center;justify-content: center;">
				<el-row class="content-row" style="width: 70%;" :gutter="0">
					<el-col :xs="24" :sm="24" :md="12" :lg="12">
						<div style=" height: 340px;" id="map-warp" class="bm-view">

						</div>
						<!-- <el-image class="bm-view" :lazy="true" :src="data.atlasImage" style="height: 340px;">
						</el-image> -->

						<!-- <baidu-map @touchstart.passive @touchmove.passive @touchend.passive :scroll-wheel-zoom="true" class="map bm-view" :center="mapCenter" :zoom="zoom"
							style=" height: 340px;">
							<bm-info-window :position="mapCenter" :title="$t('placeholderGTTG')" :show="infoWindow.show"
								@close="infoWindowClose" @open="infoWindowOpen">
							</bm-info-window>
							<bm-traffic :predictDate="{weekday: 7, hour: 12}">
							</bm-traffic>
							<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
							  <bm-marker animation="BMAP_ANIMATION_BOUNCE" :position="mapCenter"></bm-marker>  
						</baidu-map> -->
					</el-col>
					<el-col class="contactDetails" style=" display: flex;  align-items: center;height: 340px;" :xs="24"
						:sm="24" :md="12" :lg="12">
						<el-row class="contactDetailsRow" style="width: 90%;height: 80%;">
							<el-col class="contacts" style="height: 100%;">
								<el-row style="height: 20%;">
									<el-col class="title" :span="24">{{$t('contactUs')}}</el-col>
								</el-row>
								<el-row style="height: 20%;">
									<el-col class="col-letf" :span="24">{{$t('telephone')}}：{{data.mobile}}</el-col>
								</el-row>
								<el-row style="height: 20%;">
									<el-col class="col-letf" :span="24">{{$t('email')}}：{{data.email}}</el-col>
								</el-row>
								<el-row style="height: 20%;">
									<el-col class="col-letf" :span="24">{{$t('zipCode')}}：{{data.postalCode}}</el-col>
								</el-row>
								<el-row style="height: 20%;">
									<el-col class="col-letf" :span="24">{{$t('address')}}：{{data.address}}</el-col>
								</el-row>

							</el-col>
						</el-row>

					</el-col>

				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import AMapLoader from '@amap/amap-jsapi-loader';


	import {
		contactUsMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer,

		},
		data() {
			return {
				map: null,
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: contactUsMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('contactUs'),
						to: '/contactUs'
					},
					{
						label: this.$t('contactDetails'),
						to: '/contactDetails'
					}
				],
				hoverIndex: -1,
				data: {
					atlasImage: ''
				},
				mapCenter: {
					lng: 119.142375,
					lat: 35.154834
				},
				mapType: 'BMAP_PERSPECTIVE_MAP', // 设置地图类型为三维地图
				zoom: 10,
				infoWindow: {}
			};
		},
		computed: {},
		created() {

		},
		mounted() {


			this.initPage();
			// 在组件挂载完成后初始化地图
			this.initMap()
			this.bindBg()
			this.bindContactUs();
			document.addEventListener('gesturestart', function(e) {
				e.preventDefault();
			});

		},
		methods: {
			infoWindowClose(e) {
				this.infoWindow.show = false
			},
			infoWindowOpen(e) {
				this.infoWindow.show = true
			},
			clear() {
				this.infoWindow.contents = ''
			},
			/**
			 * (1)	获取联系我们内容
			 */
			bindContactUs() {
				let params = {};
				let that = this;
				that.$request.getContactUs(params).then(res => {
					this.data = res.data
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)(1)	获取联系我们顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getContactUsTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			initPage() {

			},
			gotoNewList() {
				this.$router.push({
					name: "党建新闻列表"
				});
			},
			initMap() {

				AMapLoader.load({
						key: "d5af600c4aa23beb545a442e6011919c", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
					})
					.then((AMap) => {
						this.map = new AMap.Map("map-warp", {
							// 设置地图容器id

							zoom: 11, // 初始化地图级别
							center: [119.142375,
								35.154834
							], // 初始化地图中心点位置
						});
						let marker = new AMap.Marker({
							map: this.map,
							position: [119.142375, 35.154834]

						})
					 marker.on('click', this.showInfo);
						this.openInfo();

					})
					.catch((e) => {
						console.log(e);
					});

			},

			openInfo() {

				//构建信息窗体中显示的内容
				var info = [];
				 
			 
				info.push("<div style=\"width:auto;padding:10px\">钢投特有限公司</div></div>");
				this.infoWindow = new AMap.InfoWindow({
					content: info.join("<br/>") //使用默认信息窗体框样式，显示信息内容
				});
				// this. infoWindow.on('open', showInfoOpen)
				this.infoWindow.on('close', this.closeInfo)
				this.infoWindow.open(this.map, this.map.getCenter());

			},
			closeInfo() {
				this.infoWindow.close();
			},
		showInfo() {
				this.infoWindow.show();
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/contactUs/contactUs.css");


	.col-letf {
		text-align: left;
		height: 44px;
		line-height: 22px;
		font-size: 14px;
		color: #999999;
		font-weight: 400;
	}

	.title {
		width: 112px;
		font-size: 22px;
		font-weight: 400;
		color: #333333;
		line-height: 60px;
		border-bottom: 4px solid #999999;
		margin-bottom: 20px;
	}

	.contactDetails {
		background: #0484D7;


	}

	.contacts {
		background: #ffffff;
		padding-left: 20px;
	}

	.bm-view {
		height: 100%;
		width: 100%;

	}

	.content_bg {
		padding: 0;
		margin: 0 auto;
		touch-action: manipulation;
		-webkit-touch-callout: none;
	}

	@media screen and (max-width: 1080px) {}



	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}

	@media (max-width: 440px) {
		.content-row {
			width: 98% !important
		}

		.bm-view {
			width: 100% !important;
		}

		.contactDetailsRow {
			width: 95% !important;
			height: 90% !important;
		}

		.contacts {
			padding-left: 0px;
		}
	}
</style>